<template>
  <div class="content">
    <div class="active">
      <div class="header">社区动态</div>
      <div class="bodyobj">
        <router-link to="/today/inflow">
          <div class="body">
            <div class="description">
              <span>流入人口</span>
              <br />
              <i>28</i>
            </div>
            <img src="../../assets/today/slices/流入.png" alt />
          </div>
        </router-link>
        <router-link to="/today/outflow">
          <div class="body">
            <div class="description">
              <span>流出人口</span>
              <br />
              <i>28</i>
            </div>
            <img src="../../assets/today/slices/流出.png" alt />
          </div>
        </router-link>
        <router-link to="/today/newhosue">
          <div class="body">
            <div class="description">
              <span>新增出租房</span>
              <br />
              <i>28</i>
            </div>
            <img src="../../assets/today/slices/新增出租.png" alt />
          </div>
        </router-link>
        <div class="body">
          <div class="description jing">
            <span class="onlycolor1">净流入人口</span>
            <br />
            <span class="onlycolor2">28</span>
          </div>
          <img src="../../assets/today/slices/707.png" alt />
        </div>
      </div>
    </div>
    <div class="events">
      <div class="header">事件预警</div>
      <div class="bodyobj">
        <div class="body">
          <img src="../../assets/today/slices/人车轨迹.png" alt />
          <div class="description">
            <span class="round">人车轨迹</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/安全隐患.png" alt />
          <div class="description">
            <span class="round">安全隐患</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/房屋异常.png" alt />
          <div class="description">
            <span class="round">房屋异常</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/设备异常.png" alt />
          <div class="description">
            <span class="round">设备异常</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="check">
      <div class="header">业务审核</div>
      <div class="bodyobj">
        <div class="body">
          <img src="../../assets/today/slices/房屋审核.png" alt />
          <div class="description">
            <span class="round">房屋审核</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/门禁审核.png" alt />
          <div class="description">
            <span class="round">门禁审核</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/访客审核 .png" alt />
          <div class="description">
            <span class="round">访客审核</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/退租审核.png" alt />
          <div class="description">
            <span class="round">退租申请</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="serve">
      <div class="header">便民服务</div>
      <div class="bodyobj">
        <div class="body">
          <img src="../../assets/today/slices/投诉.png" alt />
          <div class="description">
            <span class="round">投诉</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/报修.png" alt />
          <div class="description">
            <span class="round">报修</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/咨询.png" alt />
          <div class="description">
            <span class="round">咨询</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
        <div class="body">
          <img src="../../assets/today/slices/建议.png" alt />
          <div class="description">
            <span class="round">建议</span>
            <br />
            <span>
              <img src="../../assets/today/slices/待处理小图标.png" alt />
              待处理:
              <strong>12</strong>
            </span>
            <span class="shu">|</span>
            <span>
              <img src="../../assets/today/slices/超时小图标.png" alt />
              超时：
              <i>4</i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Today",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.content {
  padding-bottom: 100px;
  min-height: 800px;
  position: relative;
  .shu {
    color: #cad3de;
    width: 1px;
    height: 12px;
    margin: 0 20px;
  }
  .active {
    padding: 18px 29px;
    width: 1109px;
    height: 240px;
    background-color: #fff;
    margin-bottom: 15px;
    .header {
      font-size: 20px;
      margin-bottom: 31px;
      padding-bottom: 21px;
      border-bottom: 1px solid #f5f5f5;
    }
    .bodyobj {
      display: flex;
      .body {
        position: relative;
        margin-right: 20px;
        .description {
          position: absolute;
          padding: 25px 23px;
          color: #fff;
          top: 10px;
          width: 248px;
          height: 110px;
          border-radius: 4px;
          span {
            font-size: 16px;
          }
          i {
            font-style: initial;
            font-size: 28px;
          }
        }
        .jing {
          /* border: 1px solid #f8f7fa;
          border-radius: 3px; */
          .onlycolor1 {
            color: #000;
          }
          .onlycolor2 {
            color: #000;
            font-size: 28px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .events {
    padding: 18px 29px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 10px;
    /* height: 244px; */
    width: 100%;
    .header {
      font-size: 20px;
      margin-bottom: 31px;
      padding-bottom: 21px;
      border-bottom: 1px solid #f5f5f5;
    }
    .bodyobj {
      display: flex;
      flex-wrap: wrap;
      .body {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        padding: 37px 24px;
        border: 1px solid #f8f7fa;
        border-radius: 3px;
        margin-right: 30px;
        width: 346px;
        height: 110px;
        background: #fff;
        border-radius: 4px;
        > img {
          width: 50px;
          height: 50px;
          margin-right: 14px;
        }
        .description {
          .round {
            font-size: 15px;
          }
          strong {
            color: orange;
            font-style: italic;
            font-size: 24px;
          }
          i {
            color: #fe3365;
            font-size: 24px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
  .check {
    padding: 18px 29px;
    width: 100%;
    //height: 244px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    .header {
      font-size: 20px;
      margin-bottom: 31px;
      padding-bottom: 21px;
      border-bottom: 1px solid #f5f5f5;
    }
    .bodyobj {
      display: flex;
      flex-wrap: wrap;
      .body {
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
        border: 1px solid #f8f7fa;
        border-radius: 4px;
        margin-right: 30px;
        width: 346px;
        height: 110px;
        padding: 37px 24px;
        background-color: #fff;
        > img {
          width: 50px;
          height: 50px;
          margin-right: 14px;
        }
        .description {
          float: right;
          .round {
            font-size: 15px;
          }
          strong {
            color: orange;
            font-style: italic;
            font-size: 24px;
          }
          i {
            color: #fe3365;
            font-size: 24px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
  .serve {
    padding: 18px 29px;
    width: 100%;
    // height: 244px;
    border-radius: 10px;
    background-color: #fff;

    .header {
      font-size: 20px;
      margin-bottom: 30px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f5f5f5;
    }
    .bodyobj {
      display: flex;
      flex-wrap: wrap;
      .body {
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
        margin-right: 30px;
        border: 1px solid #f8f7fa;
        border-radius: 4px;
        width: 346px;
        height: 110px;
        padding: 37px 24px;
        background-color: #fff;
        > img {
          width: 50px;
          height: 50px;
          margin-right: 14px;
        }
        .description {
          float: right;
          .round {
            font-size: 15px;
          }
          strong {
            color: orange;
            font-style: italic;
            font-size: 24px;
          }
          i {
            color: #fe3365;
            font-size: 24px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
